
// colors

// contrast, foreground:
@const FC0 : #ffffff;
@const FC1 : #fca2a2;
@const FC2 : #fac28e;
@const FC3 : #ffef8d;
@const FC4 : #a8f9a8;
@const FC5 : #9ddafe;
@const FC6 : #cfc0f9;
// light, background
@const BC0 : #ffffff;
@const BC1 : #ffd9d9;
@const BC2 : #ffe4ca;
@const BC3 : #fef6c4;
@const BC4 : #d5ffd5;
@const BC5 : #ddf2ff;
@const BC6 : #ede6ff;


@mixin HEADER-BAND
{
  height:38dip;
  background:#eee;
  border-bottom:1px solid #ccc;
}

@mixin FOOTER-BAND {
  font:system;
  font-size:12dip;
  padding:0;
  border-top:1px solid #ccc;
  background:color(notes-back);
  height:20dip;
  border-spacing:6dip;
  width:*;
  flow:horizontal;
  overflow-x:hidden;
}

@mixin FOOTER-BAND-LABEL {
  display:block;
  width:max-content;
  padding:0;
  margin:0;
  height:20dip;
  line-height:height(100%);
  color:#999;
}
/*@mixin FOOTER-BAND-OUTPUT {
  display:block;
  width:max-content;
  padding:0 4dip;
  margin:0;
  height:20dip;
  line-height:height(100%);
  //background:var(notes-list-back, #e8e8e8);
}

@mixin FOOTER-BAND-CTL {
  display:block;
  width:max-content;
  padding-top:0;
  padding-bottom:0;
  margin:0;
  height:20dip;
  line-height:height(100%);
} */



@import url(note-view.css);
@import url(notes-view.css);
@import url(tags-view.css);
@import url(aside.css);
@import url(libs/notifications.css);

html { 
  background:#333;
  font:10pt Verdana,Helvetica,Roboto,sans-serif;
  font-rendering-mode:snap-pixel; 
  //background-color:rgba(96,96,96,0.85); 
  //background-image: url();
  //background-size:600dip 300dip;  
  var(note-width) : 800dip;
  var(note-padding) : 10dip;

  var(tags-back)  : #444; //#34464f;
  var(notes-back)  : #eee;//#dfd6cf;
  var(notes-list-back)  : #f8f8f8;
  var(note-back)  : #fffffd;
  var(selection)  : #ccc;
  var(selection-text)  : #000;  
  var(selection-dark)  : #888;
  var(selection-dark-text)  : #fff;
  var(selection-dark-hover)  : rgba(255,255,255,0.1);
  var(band-size): 38dip; // size of top and side bands (bars)
}

@media blur-behind {
  html { background-color:transparent; }
}

body {
  flow:stack;
  margin:0;
}

frame#overlay { visibility:none; }
body.overlay-shown > frame#overlay { visibility:visible; }

notes-view {
  border-top:1px solid #ccc; 
}
note-view {
  background: var(note-back, #fff);
  border-top:1px solid #ccc; 
}

frameset {
  prototype: Frameset url(main-ui.tis);
  size:*; // spans the whole window
}

frameset > splitter {
  width:1px;
  background: #ccc;
  border: none;
  hit-margin:0 2dip;
}

section.collapsible          { prototype: CollapsibleSection url(libs/collapsible.tis); 
                               height:max-content; }
section.collapsible > header { behavior:button; }
section.collapsible > header:tab-focus { outline:#f00 1dip dashed -1dip; }

section.collapsible:collapsed > :not(header) { visibility:none; }

[color=0] { fill: @FC0; }
[color=1] { fill: @FC1; }
[color=2] { fill: @FC2; }
[color=3] { fill: @FC3; }
[color=4] { fill: @FC4; }
[color=5] { fill: @FC5; }
[color=6] { fill: @FC6; }

menu.context > caption { padding-left:2em; margin:0; }

menu.context > div.colors {
  flow: horizontal;
  padding:0 1em 0 2em;
}
menu.context > div.colors > li 
{
  size:14dip;
  padding:3dip; margin:0;
  foreground-image: url(path: M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z);
  foreground-repeat:no-repeat;
  foreground-position: 50% 50%;
  foreground-size: 12dip 12dip;
  stroke:#000;
  stroke-width:1dip;
  cursor:pointer;
}
menu.context > div.colors > li:checked {
  stroke-width:2dip;
} 

frame#worker { prototype: NoteFrame url(htmlarea/htmlarea.tis); visibility:collapse; }

/* shell drag-n-drop */

/*.file-target, .html-target, .html-target 
{
  aspect: SysDDTarget url(main-ui.tis);
  //outline:2dip orange solid -2dip;
}*/

.active-target {
  outline:2dip orange solid -2dip; 
}